import React, { Component } from "react";
import "./index.css";

export default class index extends Component {
  constructor() {
    super();
    this.state = {
      doctors: [
        {
          id: "01001",
          name: "刘维泽",
          dept: "内科",
        },
        {
          id: "01002",
          name: "吕超",
          dept: "外科",
        },
      ],
      newDoctor: {
        id: "",
        name: "",
        dept: "",
      },
      editDoctor: {
        id: "",
        name: "",
        dept: "",
      },
      showEditBox: "none",
    };
  }

  changeValue = (e) => {
    let doctor = this.state.newDoctor;

    doctor[e.target.name] = e.target.value;

    this.setState({
      ...this.state,
      newDoctor: this.state.newDoctor,
    });
  };

  addDoctor = () => {
    this.setState({
      doctors: [...this.state.doctors, this.state.newDoctor],
      newDoctor: {
        id: "",
        name: "",
        dept: "",
      },
    });
  };

  deleteDoctor = (e) => {
    if (window.confirm("亲，针对要删除吗？")) {
      this.setState({
        doctors: this.state.doctors.filter((item) => item.id !== e.target.id),
      });
    }
  };

  //   修改相关
  showEditBoxFn = (e) => {

    let arr = this.state.doctors.filter(item => item.id === e.target.getAttribute("editid"))
   
    this.setState({
      showEditBox: "block",
      editDoctor: {...arr[0]},
    });
  };

  hideEditBoxFn = () => {
    this.setState({
      showEditBox: "none",
    });
  };

  changeValueEdit=(e)=>{

    let doctor = this.state.editDoctor;

    doctor[e.target.name] = e.target.value;

    this.setState({
      ...this.state,
      editDoctor: this.state.editDoctor,
    });
  }

  editDoctorFn=()=>{
    
    let index = this.state.doctors.findIndex(item=>item.id===this.state.editDoctor.id)

    this.state.doctors.splice(index,1,this.state.editDoctor);

    this.setState({
        doctors:[...this.state.doctors],
        showEditBox:"none"
    })

  }

  render() {
    const { id, name, dept } = this.state.newDoctor;
    const { id: eId, name: eName, dept: eDept } = this.state.editDoctor;
    console.log("eId",eId);
    console.log("eName",eName);
    console.log("eDept",eDept);
    return (
      <div>
        <h1>医生信息的维护</h1>
        <p>医生信息的列表:</p>
        <p>
             编号:
            <input type="text"  />
            姓名:
            <input type="text"  />
            科室:
            <input type="text"  />
            <input type="button" value="查询"  />
        </p>
        <table>
          <tbody>
            <tr>
              <td>编号</td>
              <td>姓名</td>
              <td>科室</td>
              <td>操作</td>
            </tr>
            {this.state.doctors.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td>{item.dept}</td>
                <td>
                  <input
                    type="button"
                    value="修改"
                    editid={item.id}
                    onClick={this.showEditBoxFn}
                  />
                </td>
                <td>
                  <input
                    type="button"
                    value="删除"
                    id={item.id}
                    onClick={this.deleteDoctor}
                  />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <hr />
        <p>添加医生</p>
        <div>
          <p>
            编号：
            <input
              type="text"
              value={id}
              name="id"
              onChange={this.changeValue}
            />
          </p>
          <p>
            姓名：
            <input
              type="text"
              value={name}
              name="name"
              onChange={this.changeValue}
            />
          </p>
          <p>
            科室：
            <select value={dept} name="dept" onChange={this.changeValue}>
              <option value="">===请选择科室===</option>
              <option value="儿科">儿科</option>
              <option value="内科">内科</option>
              <option value="妇科">妇科</option>
              <option value="神经科">神经科</option>
              <option value="骨科">骨科</option>
            </select>
          </p>
          <p>
            <input type="button" value="添加" onClick={this.addDoctor} />
          </p>
        </div>
        <p>修改医生</p>
        <div className="edit-box" style={{ display: this.state.showEditBox }}>
          <p>
            编号：
            <input
              type="text"
              value={eId}
              name="id"
              onChange={this.changeValueEdit}
            />
          </p>
          <p>
            姓名：
            <input
              type="text"
              value={eName}
              name="name"
              onChange={this.changeValueEdit}
            />
          </p>
          <p>
            科室：
            <select value={eDept} name="dept" 
              onChange={this.changeValueEdit} >
              <option value="">===请选择科室===</option>
              <option value="儿科">儿科</option>
              <option value="内科">内科</option>
              <option value="外科">外科</option>
              <option value="妇科">妇科</option>
              <option value="神经科">神经科</option>
              <option value="骨科">骨科</option>
            </select>
          </p>
          <p>
            <input type="button" value="修改" onClick={this.editDoctorFn} />
            <input type="button" value="取消" onClick={this.hideEditBoxFn} />
          </p>
        </div>
      </div>
    );
  }
}
